<template>
	<scroll-view :show-scrollbar="false" :enhanced="true" class="tab-bar" :scroll-x="true">
		<view @click="changeIdx(index)" :class="actIndex == index ? 'tab-bar-item act' : 'tab-bar-item'"
			v-for="(item, index) in list" :key="index">{{ item.tltName
			}}(<text :style="showRed&&item.finished<item.workItemCount?'color:#E02020':''">{{ item.finished || 0 }}/</text> {{
	item.workItemCount || 0 }})
		</view>
	</scroll-view>
</template>

<script>
export default {
	props: {
		showRed:Boolean,
		typeMap: {
			type: Object,
			default: () => {
				return {};
			}
		},
		actIndex: {
			type: [Number, String],
			default: 0
		},
		list: {
			type: Array,
			default() {
				return [
				];
			}
		}
	},
	watch:{
		list:{
			handler() { 
				this.$forceUpdate();
			},
			deep:true
		},
		typeMap:{
			handler() {
				this.$forceUpdate();
			},
			deep:true
		}
	},
	methods: {
		changeIdx(index) {
			this.$emit('change', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-bar {
	color: #333;
	font-size: 28rpx;
	overflow-x: scroll;
	width: 100%;
	white-space: nowrap;
	border-bottom: 2rpx solid #e9e9e9;
	padding-top: 10px;

	&-item {
		display: inline-block;
		margin-right: 40rpx;
		color: #999;
		padding-bottom: 15rpx;
		font-size: 24rpx;
	}

	&-item:nth-child(1) {
		margin-left: 20rpx;
	}

	.act {
		border-bottom: 4rpx solid #333;
		color: #333;
		font-size: 28rpx;
	}
}
</style>
